<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li class="ten">10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
    </ul>
    <script>
        // 利用事件冒泡，在父元素，监听到冒泡事件，统一进行处理，从而没必要给子元素单独加上监听事件。
        const ul = document.querySelector('ul')
        const li = document.querySelector('.ten')
        ul.addEventListener('click', (e) => {
            console.log('父ul')
            console.log(e);
            console.log(e.currentTarget);
            console.log(e.target);
        }, true)
        li.addEventListener('click', e => {
            console.log('子li');
        })
    </script>
</body>

</html>